<!-- components/PreviewCard.vue -->
<template>
    <div class="preview-card">
        <!-- 小狗图片 -->
        <div class="dog-image-container">
            <img src="./images/dog-holder.png" alt="等待上传" class="dog-image">
        </div>

        <!-- 根据 activeTab 显示不同提示 -->
        <p class="hint-text" v-html="getHintText()"></p>
    </div>
</template>

<script>
export default {
    props: {
        activeTab: {
            type: String,
            default: 'parser'
        }
    },
    methods: {
        // 根据标签页返回不同的提示图片
        getPlaceholderImage() {
            // 可根据需要为不同标签页设置不同图片
            return this.activeTab === 'parser'
                ? '/images/dog-parser.png'
                : '/images/dog-portrait.png';
        },

        // 根据标签页返回不同的提示文字
        getHintText() {
            if (this.activeTab === 'parser') {
                return `上传简历后，将在这里展示<strong>解析结果</strong><br>
                包括<strong>个人信息、工作经历、教育背景</strong>等`;
            } else if (this.activeTab === 'portrait') {
                return `上传简历后，将在这里生成<strong>人才画像</strong><br>
                包括<strong>技能分析、简历亮点、职业倾向</strong>等`;
            }
            return '上传简历后将展示相关结果';
        }
    }
}
</script>

<style scoped>
.preview-card {
    /* 与上方上传区保持风格统一 */
    width: 100%;
    height: 600px;
    min-height: 80%;
    /* 固定最小高度，避免页面跳动 */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 1.5rem;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px 0 rgba(200, 180, 120, 0.08);
    border: 1px solid #f0e6d2;
}

.dog-image-container {
    margin-bottom: 1.5rem;
    /* 轻微缩放动画，增加生动感 */
    transition: transform 0.3s ease;
}

.dog-image-container:hover {
    transform: scale(1.03);
    /* 鼠标悬停时轻微放大 */
}

.dog-image {
    width: 300px;
    /* 根据图片比例调整 */
    height: auto;
    border-radius: 12px;
    /* 圆角让图片更柔和 */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
    /* 轻微阴影增加层次感 */
}

.hint-text {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 500px;
    /* 限制文字宽度，避免过长换行混乱 */
}
</style>